<template>
  <span class="caret-wrapper">
    <i class="sort-caret ascending"> </i>
    <i class="sort-caret descending"> </i>
  </span>
</template>
<script></script>
<style scoped lang="less">
.caret-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 34px;
  width: 24px;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;
}
.sort-caret {
  width: 0;
  height: 0;
  border: solid 5px transparent;
  position: absolute;
  left: 7px;

  &.ascending {
    border-bottom-color: #ccc;
    top: 5px;
  }

  &.descending {
    border-top-color: #eee;
    bottom: 7px;
  }
}
</style>
